<template>
  <ui-dialog :visible.sync="value" width="1000px" center :append-to-body="true" :before-close="closeDialog">
    <div id="printJS-form-detail">
      <div class="bill-message-content">
        <div class="title-nav" v-if="titleBtn">
          <span class="left-title">票据信息</span>
          <div class="right-btn cursor-pointer" @click="isShowBack = !isShowBack">
            <img src="@/assets/image/electBill/switch.png" alt="" />
            <span>{{ isShowBack ? '票据背面' : '票据正面' }}</span>
          </div>
        </div>
        <!-- 票据正面 -->
        <transition name="fade" mode="out-in">
          <template v-if="isShowBack">
            <div class="bg-pic mg-bt-30" key="front">
              <p class="newDate" v-if="!titleBtn">显示日期：{{ newDate }}</p>
              <!-- logo -->
              <div class="logo-nav">
                <img src="@/assets/image/electBill/logo.png" alt="" class="circle" />
                <div>
                  <span class="logo-title">数字银行</span>
                  <span class="logo-abb">BANK OF CSII</span>
                </div>
              </div>
              <!-- 标题 -->
              <p class="table-title" v-if="billType == 'AC02'">电 子 商 业 承 兑 汇 票</p>
              <p class="table-title" v-if="billType == 'AC01'">电 子 银 行 承 兑 汇 票</p>
              <!-- 标题底部日期 -->
              <table class="bill-title">
                <tr>
                  <td class="align-left">出票日期：{{ drawDate }}</td>
                  <td class="align-right">票据状态：{{ billStatus }}</td>
                </tr>
                <tr>
                  <td class="align-left">汇票到期日：{{ dueDate }}</td>
                  <td class="align-right">票据号码：{{ billNo || '出票成功后显示' }}</td>
                </tr>
              </table>

              <!-- 表格数据 13行18列-->
              <table class="bill-table">
                <!-- 合并三行-前三行 -->
                <tr>
                  <td rowspan="3">
                    <div>出</div>
                    <div>票</div>
                    <div>人</div>
                  </td>
                  <td>全 称</td>
                  <td colspan="2" class="align-left">{{ drawerName }}</td>
                  <td rowspan="3">
                    <div>收</div>
                    <div>款</div>
                    <div>人</div>
                  </td>
                  <td>全 称</td>
                  <td colspan="12" class="align-left">{{ payeeNm }}</td>
                </tr>
                <tr>
                  <td>账 号</td>
                  <td colspan="2" class="align-left">{{ drawerAcctNo }}</td>
                  <td>账 号</td>
                  <td colspan="12" class="align-left">{{ payeeAcctNo }}</td>
                </tr>
                <tr>
                  <td>开户银行</td>
                  <td colspan="2" class="align-left">{{ drawerBankNo }}</td>
                  <td>开户银行</td>
                  <td colspan="12" class="align-left">{{ payeeInstName }}</td>
                </tr>
                <!-- 第4行 -->
                <tr>
                  <td colspan="2">出票保证信息</td>
                  <td colspan="16" class="align-left">
                    <span>保证人名称：{{ drawGuarName }}</span>
                    <span class="mg-lt-20">保证人地址：{{ drawGuarAddr }}</span>
                    <span class="mg-lt-20">保证日期：{{ drawGuarDate }}</span>
                  </td>
                </tr>
                <!-- 第五行 -->
                <tr>
                  <td colspan="2" rowspan="2">票据金额</td>
                  <td colspan="4" rowspan="2" class="align-left">
                    <span>人民币(大写)</span>
                    <span class="mg-lt-20">{{ faceBal | amountFilter }}</span>
                  </td>
                  <td class="td-padding">十</td>
                  <td class="td-padding">亿</td>
                  <td class="td-padding">千</td>
                  <td class="td-padding">百</td>
                  <td class="td-padding">十</td>
                  <td class="td-padding">万</td>
                  <td class="td-padding">千</td>
                  <td class="td-padding">百</td>
                  <td class="td-padding">十</td>
                  <td class="td-padding">元</td>
                  <td class="td-padding">角</td>
                  <td class="td-padding">分</td>
                </tr>
                <!-- 第六行 -->
                <tr class="tr-padding">
                  <td v-for="(item, index) in rmbMoney" :key="index">{{ item }}</td>
                </tr>
                <!-- 第七行合并第八行 -->
                <tr>
                  <td rowspan="2" colspan="2">承兑人信息</td>
                  <td>全 称</td>
                  <td class="align-left">{{ acceptorName }}</td>
                  <td colspan="2">开户行行号</td>
                  <td colspan="12" class="align-left">{{ accpInstNo }}</td>
                </tr>
                <tr>
                  <td>账 号</td>
                  <td class="align-left">{{ accpAcctNo }}</td>
                  <td colspan="2">开户行名称</td>
                  <td colspan="12" class="align-left">{{ accpInstName }}</td>
                </tr>
                <!-- 第九行第十行 -->
                <tr>
                  <td colspan="2">交易合同号</td>
                  <td colspan="2" class="align-left">{{ contractNo }}</td>
                  <td rowspan="2">
                    <div>收</div>
                    <div>款</div>
                    <div>人</div>
                  </td>
                  <td colspan="13" class="align-left">出票人承诺：本汇票请予以承兑，到期无条件付款</td>
                </tr>
                <tr>
                  <td colspan="2">能否转让</td>
                  <td colspan="2" class="align-left">{{ $msg('transMarkDict')[transferMark] }}</td>
                  <td colspan="13">
                    <div class="align-left">承兑人承兑：本汇票已经承兑，到期无条件付款</div>
                    <div class="align-right mg-top-16">承兑日期：{{ accpDate }}</div>
                  </td>
                </tr>
                <!-- 第十一行 -->
                <tr>
                  <td colspan="2">承兑保证信息</td>
                  <td colspan="16" class="align-left">
                    <span>保证人名称：{{ accpGuarName }}</span>
                    <span class="mg-lt-20">保证人地址：{{ accpGuarAddr }}</span>
                    <span class="mg-lt-20">保证日期：{{ accpGuarDate }}</span>
                  </td>
                </tr>
                <!-- 十二行十三行 -->
                <tr>
                  <!-- 给这个td设置宽度 -->
                  <td rowspan="4" colspan="2">
                    <div>评级信息</div>
                    <div>（由出票人、</div>
                    <div>承兑人自己记载，</div>
                    <div>仅供参考）</div>
                  </td>
                  <td rowspan="2">出票人</td>
                  <td colspan="4" class="align-left border-none">评级主体：{{ drawerRateAgency }}</td>
                  <td colspan="11" class="align-left border-none">信用等级：{{ drawerCreditRating }}</td>
                </tr>
                <tr>
                  <td colspan="15" class="align-left">评级到期日：{{ drawerRateDate }}</td>
                </tr>
                <tr>
                  <td rowspan="2">承兑人</td>
                  <td colspan="4" class="align-left border-none">评级主体：{{ accpRateAgency }}</td>
                  <td colspan="11" class="align-left border-none">信用等级：{{ accpCreditRating }}</td>
                </tr>
                <tr>
                  <td colspan="15" class="align-left">评级到期日：{{ accpRateDate }}</td>
                </tr>
              </table>
            </div>
          </template>
          <!-- 票据反面 14行2列 -->
          <template v-else>
            <div class="bg-pic-reverse mg-bt-30" key="reverse">
              <ui-tabs class="title-tabs" type="card" v-model="page" @tab-click="groupClick">
                <ui-tab-pane
                  v-for="(item, index) in Math.ceil(RebillData.length / 4)"
                  :key="index"
                  :label="String(index + 1)"
                  :name="String(item)"
                ></ui-tab-pane>
              </ui-tabs>
              <div v-if="rebillList.length > 0">
                <table class="bill-table-reverse" v-for="(item, index) in rebillList" :key="index">
                  <tr>
                    <td colspan="2">{{ item.type == 'endorsement' ? '转让背书' : '质押' }}</td>
                  </tr>
                  <tr>
                    <td>{{ item.type == 'endorsement' ? '背书' : '出质' }}人名称</td>
                    <td>{{ item.endorsementName || item.pledgeName }}</td>
                  </tr>
                  <tr>
                    <td>{{ item.type == 'endorsement' ? '被背书' : '质权' }}人名称</td>
                    <td>{{ item.endorsedName || item.pledgeeName }}</td>
                  </tr>
                  <tr v-if="item.type == 'endorsement'">
                    <td>能否转让</td>
                    <td>{{ $msg('transMarkDict')[item.transferMark] }}</td>
                  </tr>
                  <tr>
                    <td>{{ item.type == 'endorsement' ? '背书' : '质押' }}日期</td>
                    <td>{{ item.endorsementDate || item.pledgeDate }}</td>
                  </tr>
                </table>
              </div>
              <div v-else>
                <table class="bill-table-reverse" v-for="(item, index) in 4" :key="index">
                  <tr>
                    <td colspan="2"></td>
                  </tr>
                  <tr>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td></td>
                    <td></td>
                  </tr>
                </table>
              </div>
            </div>
          </template>
        </transition>
      </div>
    </div>
    <!-- 按钮组 -->
    <div class="mg-top-30 text-center">
      <ui-button class="default-btn" @click="closeDialog">返回</ui-button>
      <ui-button class="primary-btn" @click="onPrint()">打印</ui-button>
      <ui-button class="primary-btn" @click="onSwitch()">{{ msg }}</ui-button>
    </div>
  </ui-dialog>
</template>
<script>
import electBill from '@/api/electBill/electBill.js';
import { dateUtil } from '@csii/vx-util';
import printStyle from '!css-loader!sass-loader!@/style/print/common/bill-table.scss';

import printJs from '@/common/mixin/print';
export default {
  mixins: [printJs],
  name: 'vx-bill-dialog-table',
  props: {
    billData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    billNo: {
      type: String,
      default: '',
    },
    titleBtn: {
      type: Boolean,
      default: false,
    },
    value: {
      // 控制弹框弹出
      require: true,
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      msg: '票据背面',
      page: '1',
      RebillData: [],
      rebillList: [],
      // 票据正反面 true正面 false反面
      isShowBack: true,
      // 承兑人名称
      acceptorName: '',
      // 承兑人开户账户
      accpAcctNo: '',
      // 承兑人信用等级
      accpCreditRating: '',
      // 承兑日期
      accpDate: '',
      // 承兑保证人地址
      accpGuarAddr: '',
      // 承兑保证日期
      accpGuarDate: '',
      // 承兑保证人名称
      accpGuarName: '',
      // 承兑人开户行行号
      accpInstNo: '',
      // 承兑人评级机构
      accpRateAgency: '',
      // 承兑人评级到期日
      accpRateDate: '',
      // 票据状态
      billStatus: '',
      // 交易合同编号
      contractNo: '',
      // 出票保证人地址
      drawGuarAddr: '',
      // 出票保证人日期
      drawGuarDate: '',
      // 出票保证人名称
      drawGuarName: '',
      // 出票人开户账户
      drawerAcctNo: '',
      // 出票人信用等级
      drawerCreditRating: '',
      // 出票人名称
      drawerName: '',
      // 出票人评级机构
      drawerRateAgency: '',
      // 出票日期
      drawDate: '',
      // 出票人评级到期日
      drawerRateDate: '',
      // 汇票到期日
      dueDate: '',
      // 票面余额
      faceBal: '',
      // 收款人开户账户
      payeeAcctNo: '',
      // 收款人名称
      payeeNm: '',
      // 转让标记
      transferMark: '',
      accpType: '',
      billType: '',
      accpOrgCode: '',
      drawerInstNo: '',
      drawerOrgCode: '',
      drawerType: '',
      payeeBankNo: '',
      payeeOrgCode: '',
      payeeType: '',
      // 金额分割
      rmbMoney: [],
      // 显示日期
      newDate: '',
      drawerBankNo: '',
      payeeInstName: '',
      accpInstName: '',
    };
  },
  watch: {
    value: {
      handler: function(val) {
        if (val) {
          this.init();
        }
      },
      deep: true,
    },
  },
  methods: {
    init() {
      this.newDate = dateUtil.getDate('', '', 'YYYY-MM-DD');
      if (this.billData === {} || this.billNo !== '') {
        electBill
          .getEdraftEndorseAlyFaresSeemMsgQry({
            billNo: this.billNo,
            QueryType: 'A0', // 查询类型
          })
          .then((res) => {
            this.acceptorName = res.acceptorName;
            this.accpAcctNo = res.accpAcctNo;
            this.accpCreditRating = res.accpCreditRating;
            this.accpDate = res.accpDate;
            this.accpGuarAddr = res.accpGuarAddr;
            this.accpGuarDate = res.accpGuarDate;
            this.accpGuarName = res.accpGuarName;
            this.accpInstNo = res.accpInstNo;
            this.accpOrgCode = res.accpOrgCode;
            this.accpRateAgency = res.accpRateAgency;
            this.accpRateDate = res.accpRateDate;
            this.accpType = res.accpType;
            this.billStatus = res.billStatus;
            this.billType = res.billType;
            this.contractNo = res.contractNo;
            this.drawGuarAddr = res.drawGuarAddr;
            this.drawGuarDate = res.drawGuarDate;
            this.drawGuarName = res.drawGuarName;
            this.drawerAcctNo = res.drawerAcctNo;
            this.drawerCreditRating = res.drawerCreditRating;
            this.drawerInstNo = res.drawerInstNo;
            this.drawerName = res.drawerName;
            this.drawerOrgCode = res.drawerOrgCode;
            this.drawerRateAgency = res.drawerRateAgency;
            this.drawerRateDate = res.drawerRateDate;
            this.drawerType = res.drawerType;
            this.dueDate = res.dueDate;
            this.faceBal = res.faceBal;
            this.payeeAcctNo = res.payeeAcctNo;
            this.payeeBankNo = res.payeeBankNo;
            this.payeeNm = res.payeeNm;
            this.payeeOrgCode = res.payeeOrgCode;
            this.payeeType = res.payeeType;
            this.accpInstName = res.accpInstName;
            this.drawerBankNo = res.drawerBankNo;
            this.payeeInstName = res.payeeInstName;
            this.transferMark = res.transferMark;
            this.drawDate = res.drawDate;
            this.moneyFormat();
            this.RebillData = res.backData;
            this.rebillList = this.RebillData.slice(0, 4);
          });
      } else if (this.billData) {
        this.acceptorName = this.billData.acceptorName;
        this.accpAcctNo = this.billData.accpAcctNo;
        this.accpCreditRating = this.billData.accpCreditRating;
        this.accpDate = this.billData.accpDate;
        this.accpGuarAddr = this.billData.accpGuarAddr;
        this.accpGuarDate = this.billData.accpGuarDate;
        this.accpGuarName = this.billData.accpGuarName;
        this.accpInstNo = this.billData.AccpBankNo;
        this.accpOrgCode = this.billData.accpOrgCode;
        this.accpRateAgency = this.billData.accpRateAgency;
        this.accpRateDate = this.billData.accpRateDate;
        this.accpType = this.billData.accpType;
        this.billStatus = this.billData.billStatus;
        this.billType = this.billData.billType;
        this.contractNo = this.billData.contractNo;
        this.drawGuarAddr = this.billData.drawGuarAddr;
        this.drawGuarDate = this.billData.drawGuarDate;
        this.drawGuarName = this.billData.drawGuarName;
        this.drawerAcctNo = this.billData.drawerAcctNo;
        this.drawerCreditRating = this.billData.drawerCreditRating;
        this.drawerInstNo = this.billData.drawerInstNo;
        this.drawerName = this.billData.drawerName;
        this.drawerOrgCode = this.billData.drawerOrgCode;
        this.drawerRateAgency = this.billData.drawerRateAgency;
        this.drawerRateDate = this.billData.drawerRateDate;
        this.drawerType = this.billData.drawerType;
        this.dueDate = this.billData.dueDate;
        this.faceBal = this.billData.Amt;
        this.payeeAcctNo = this.billData.payeeAcctNo;
        this.payeeBankNo = this.billData.payeeBankNo;
        this.payeeNm = this.billData.payeeNm;
        this.drawerBankNo = this.billData.drawerBankNo;
        this.accpInstName = this.billData.accpInstName;
        this.payeeInstName = this.billData.payeeInstName;
        this.payeeOrgCode = this.billData.payeeOrgCode;
        this.payeeType = this.billData.payeeType;
        this.transferMark = this.billData.EndorseMode;
        this.drawDate = this.billData.drawDate;
        this.moneyFormat();
      }
    },
    // 打印
    onPrint() {
      this.print('printJS-form-detail', printStyle.toString());
    },
    //
    closeDialog() {
      this.msg = '票据背面';
      this.isShowBack = true;
      this.$emit('input', false);
    },
    // 切换票据正反面
    onSwitch() {
      this.isShowBack = !this.isShowBack;
      this.msg = this.isShowBack ? '票据背面' : '票据正面';
    },
    // 菜单栏切换
    groupClick(tab) {
      this.page = tab.name;
      let n = (Number(tab.name) - 1) * 4;
      this.rebillList = this.RebillData.slice(n, n + 4);
    },
    //   金额格式化-分割
    moneyFormat() {
      if (this.faceBal) {
        // 判断是否有小数点
        if (this.faceBal.indexOf('.') == -1) {
          this.faceBal += '.00';
        } else {
          let money = this.faceBal.split('.');
          this.faceBal += money[1].split('').length === 1 ? '0' : '';
        }
        let rmb = this.faceBal.split('.');
        this.rmbMoney = [...rmb[0].split(''), ...rmb[1].split('')];
        //   判断金额长度是否大于12
        if (this.rmbMoney.length < 12) {
          this.rmbMoney.unshift('￥');
        }
        for (let i = 0; i < 12 - this.rmbMoney.length; i++) {
          this.$nextTick(() => {
            this.rmbMoney.unshift('');
          });
        }
      }
    },
  },
};
</script>

<style lang="scss">
// 正反面切换样式
.title-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left-title {
    height: 22px;
    opacity: 1;
    font-size: 16px;
    font-weight: 600;
    color: $color-text-main;
    line-height: 22px;
  }
  .right-btn {
    width: 120px;
    height: 40px;
    padding: 13px 19px;
    box-sizing: border-box;
    opacity: 1;
    border: 1px solid $color-border-7;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    img {
      width: 16px;
      height: 16px;
    }
    span {
      height: 14px;
      opacity: 1;
      font-size: 14px;
      color: $color-text-hover;
      line-height: 14px;
    }
  }
}
// 标题
.table-title {
  height: 60px;
  opacity: 1;
  font-size: 36px;
  font-weight: 600;
  text-align: center;
  color: $color-text-main;
  line-height: 60px;
  margin-bottom: 17px;
}
// 背景图-票据大框
.bg-pic-reverse,
.bg-pic {
  margin-top: 10px;
  border: 1px solid $color-border-3;
  padding: 35px 28px 35px 32px;
  box-sizing: border-box;
  .newDate {
    font-size: 14px;
    color: $color-text-main;
    line-height: 14px;
    margin-bottom: 8px;
  }
  .logo-nav {
    width: 126px;
    display: flex;
    justify-content: space-between;
    .circle {
      width: 40px;
      height: 40px;
    }
    div {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
    }
    .logo-title {
      height: 16px;
      opacity: 1;
      font-size: 18px;
      font-weight: 600;
      color: $color-text-main;
      line-height: 20px;
    }
    .logo-abb {
      height: 16px;
      opacity: 1;
      font-size: 12px;
      font-weight: 400;
      color: $color-text-sub;
      line-height: 20px;
    }
  }
  .title-tabs {
    > .ui-tabs__header {
      padding-left: 16px;
    }
    .ui-tabs__item {
      padding: 0 50px !important;
    }
  }
}
.mg-tb-5 {
  margin-top: 8px;
  margin-bottom: 16px;
}
// 表格样式
.bill-table-reverse,
.bill-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid $color-border-3;
  text-align: center;
  box-sizing: border-box;
  td {
    border: 1px solid $color-border-3;
    padding: 14px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 500;
    color: $color-text-main;
  }
  .amount-word {
    width: 150px;
    padding-right: 5px;
    white-space: normal;
  }

  .td-padding {
    padding: 0;
    height: 29px;
    width: 25px;
  }
  .tr-padding td {
    padding: 0;
    height: 52px;
    width: 25px;
  }
}
// 表格反面
.bill-table-reverse {
  tr {
    td:first-child {
      width: 20%;
    }
    td:nth-child(2) {
      text-align: left;
    }
  }
}
// 反面大框
.bg-pic-reverse {
  padding: 25px 10px;
}
// 居中对齐
.align-center {
  text-align: center;
}
// 左对齐
.align-left {
  text-align: left;
}
// 右对齐
.align-right {
  text-align: right;
}

.bill-title {
  width: 100%;
  opacity: 1;
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  padding-bottom: 10px;
}

.mg-lt-20 {
  margin-left: 20px;
}
.border-none {
  border: none !important;
}
</style>
